<!-- 左侧导航 -->
<template>
    <div class="bg-slate-800 h-full transition-all duration-300" :style="{width: menuStore.menuWidth}" >
    
        <!-- 导航标题 -->
        <h5 class=" pt-2 mb-2 text-center leading-10 ">{{ isCollapse? 'K' : 'KittenBlog' }}</h5>
            <!-- 仪表盘 -->
            <!-- 下方菜单 -->
            <el-menu :default-active="defaultActive" @select="handleSelect" :collapse="isCollapse" :collapse-transition="false">
                <template v-for="(item, index) in nav" :key="index">
                    <el-menu-item :index="item.path" >
                        <el-icon>
                            <!-- 动态图标 -->
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { useMenuStore } from '@/stores/menu';
import {
    Document,
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'
import { computed, ref } from 'vue';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
//侧边栏导航定义
const nav = [
    { title: '仪表盘', icon: 'menu', path: '/admin/index' },
    { title: '文章管理', icon: 'document', path: '/admin/article/list' },
    { title: '分类管理', icon: 'FolderOpened', path: '/admin/category/list' },
    { title: '标签管理', icon: 'Paperclip', path: '/admin/tag/list' },
    { title: 'Wiki管理', icon: 'Collection', path: '/admin/wiki/list' },
    { title: 'blog设置', icon: 'setting', path: '/admin/blog/setting' }
]
//默认选中
const route = useRoute()
const defaultActive = ref(route.path)
//路由导航
const handleSelect = (path) =>{
    console.log(path)
    router.push(path)
}
//侧栏宽度
const menuStore = useMenuStore()
const isCollapse = computed(()=> !(menuStore.menuWidth == '250px'))
//适配标签导航
onBeforeRouteUpdate((to, from) => {
    defaultActive.value = to.path
})


</script>

<style scoped>
.el-menu {
    background-color: rgb(30 41 59 / 1);
    border-right: 0;
}

.el-sub-menu__title {
    color: #fff;
}

.el-sub-menu__title:hover {
    background-color: #ffffff10;
}

.el-menu-item.is-active {
    background-color: var(--el-color-primary);
    color: #000;
}

.el-menu-item.is-active:hover {
    background-color: var(--el-color-primary);
}

.el-menu-item {
    color: #fff;
}

.el-menu-item:hover {
    background-color: #ffffff10;
}
</style>